import React, { Component } from "react";
// import axios from "axios";
export default class SearchApp extends Component {
  // search = () => {
  //   // 获取用户输入
  //   // const {value}=this.keyWordElement
  //   const {
  //     keyWordElement: { value: keyWord },
  //   } = this;
  //   // 发送请求前通知app修改状态
  //   this.props.updateAppState({ isFirst: false, isLoading: true });
  //   console.log(keyWord);
  //   // 发送网络请求
  //   axios.get(`http://localhost:3000/search/users?q=${keyWord}`)
  //     .then((res) => {
  //       // 请求成功之后更改状态
  //       this.props.updateAppState({isFirst:false,isLoading:false,users:res.data.items})
  //       console.log("res", res.data);
  //     },
  //     error=>{
  //       // 请求失败更改状态
  //       this.props.updateAppState({err:error,isLoading:false})
  //       console.log('失败了',error);

  //     }
  //     );
 
  // };
  search = async () => {
    // 获取用户输入
    // const {value}=this.keyWordElement
    const {
      keyWordElement: { value: keyWord },
    } = this;
    // 发送请求前通知 app 修改状态
    this.props.updateAppState({ isFirst: false, isLoading: true });
    console.log(keyWord);
  
    try {
      // 发起网络请求
      const res = await fetch(`http://localhost:3000/search/users?q=${keyWord}`);
      const data = await res.json();
      console.log("data", data);
  
      // 更新 app 状态，将获取到的数据传递给父组件
      this.props.updateAppState({
        isFirst: false,
        isLoading: false,
        users: data.items,
      });
    } catch (error) {
      // 处理请求失败的情况
      console.log("请求失败", error);
  
      // 更新 app 状态，将错误信息传递给父组件
      this.props.updateAppState({ err: error, isLoading: false });
    }
  };
  render() {
    return (
      <div>
        <section className="jumbotron">
          <h3 className="jumbotron-heading">搜索GitHub用户</h3>
          <div>
            <input
              ref={(c) => (this.keyWordElement = c)}
              type="text"
              placeholder="点击关键词搜索"
            />
            &nbsp;
            <button onClick={this.search}>搜索</button>
          </div>
        </section>
      </div>
    );
  }
}
